<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡小案例</title>
    <style>

        .outer{
            width: 500px;
            position: relative;
            overflow: hidden;
        }

        .gzPicture{
            width: 500px;
            height: 300px;
            transition: all 1s;

        }

        .mask{
            width: 500px;
            height: 300px;
            background-color: black;
            line-height: 300px;
            text-align: center;
            font-size: 120px;
            /*开启定位*/
            position: absolute;
            left: 0;
            top: 0;
            color: white;
            opacity: 0;
            transition: all 1s ;
            cursor: pointer;
        }
        .outer:hover .mask{
            opacity: 0.5;

        }
        .outer:hover .gzPicture{
            transform: scale(1.6) rotate(20deg);
        }

    </style>
</head>
<body>
<div class="outer">
<!--    图片-->
    <img class="gzPicture" src="广州.jpg" alt="广州">
<!--    遮盖-->
    <div class="mask">广州</div>
</div>
</body>
</html>